import React, { useContext, useMemo } from 'react'
import { Outlet, Link } from 'react-router-dom'
import { ProductContext } from '@/App'
export default function Home() {
  const products = useContext(ProductContext)
  const hotList = useMemo(() => products.filter(item => item.hot), [products])
  const highList = useMemo(() => products.filter(item => item.high), [products])
  return (
    <div>
      <h1>Home</h1>
      <Link to="/" style={ { marginRight: '30px' } }>热门商品</Link>  
      <Link to="/highList" style={ { marginRight: '30px' } }>精品商品</Link>  
      <Link to="/list" style={ { marginRight: '30px' } }>全部商品</Link>  
      {/* 子路由出口 */}
      <div style={{ border: '1px solid #444' }}>
        <Outlet context={ { hotList, highList } }></Outlet>  
      </div>
    </div>
  )
}
